<template>
  <div v-if="permission"
       class="dashboard_layout absolute inset-0 flex flex-col">
    <span class="btnBox"
          @click="showDesign"
          v-if="$hasPermission('sys:tenant:model:allowtomanagesystemmodel')">
      <i class="el-icon-more showBtn"></i>
    </span>
    <div class="top-toolbar"
         v-if="showMsg&&$hasPermission('sys:report:reportadmin')">
      <div class="top-toolbar-title"></div>
      <div class="top-toolbar-tool">
        <el-button-group style="position:absolute;right:40px;top:6px;">
          <el-button style="height: 24px;padding: 5px 15px;"
                     icon="el-icon-plus"
                     v-if="editMode&&$hasPermission('sys:report:edit')&&$hasPermission('sys:report:reportadmin') && $hasPermission('sys:tenant:model:allowtomanagesystemmodel')"
                     size="mini"
                     type="success"
                     v-on:click.native='selectedgadgetPop'>{{ $t('add') }}
          </el-button>
          <el-button size="mini"
                     type="primary"
                     style="height: 24px;padding: 5px 15px;"
                     v-if="$hasPermission('sys:tenant:model:allowtomanagesystemmodel')"
                     icon="el-icon-edit"
                     v-on:click.native='toggleClick'
                     ref="toggleBtn">{{ editMode ? 'Save' : 'Design' }}
          </el-button>
          <!-- MB-4780 start -->
          <el-button size="mini"
                     style="height: 24px;padding: 5px 15px;"
                     v-if="$hasPermission('sys:tenant:model:allowtomanage:report:temmodel')&&false"
                     icon="el-icon-document-copy">{{ $t('custom.reports.clonebtn') }}
          </el-button>
          <el-button size="mini"
                     v-if="$hasPermission('sys:tenant:model:allowtomanage:report:temmodel')&&false"
                     icon="el-icon-printer">{{ $t('custom.reports.botbtn') }}
          </el-button>
          <!-- MB-4780 end -->
        </el-button-group>
        <i class="el-icon-circle-close closeBtn"
           @click="closeDesign"></i>
      </div>
    </div>
    <div v-loading="loading"
         class="vue-grid-layout-dashboard">
      <!-- <div style="width:100%;height: 30px;text-align:right;"
        v-if="$hasPermission('sys:tenant:model:allowtomanagesystemmodel')">
      <el-button-group>
        <el-button type="primary"
                  plain
                  icon="el-icon-plus"
                  v-if="editMode"
                  size="small"
                  v-on:click.native='selectedgadgetPop'></el-button>
        <el-button type="primary"
                  plain
                  icon="el-icon-edit"
                  ref="toggleBtn"
                  size="small"
                  v-on:click.native='toggleClick'></el-button>
      </el-button-group>
    </div> -->
      <div v-if="!loading&&gadgets.length===0"
           style="display: flex;justify-content: center ;align-items:center ;height: 80vh;background: #fff; margin-top:10px;">
        <img :src="$ossLink+'/app/dashboard/dashboard-left.png'"
             style="height:500px" />
        <div style="margin-left:60px;">
          <div style="font-size: 34px;margin-bottom: 10px;">{{$t('custom.dashboard.nulldatafirst')}}</div>
          <div style="font-size: 34px;margin-bottom: 15px;">{{$t('custom.dashboard.nulldatasecond')}}</div>
          <div style="font-size: 20px;margin-bottom: 20px;color: #c8c8c8;">{{$t('custom.dashboard.nulldatathree')}}</div>
          <!-- <div  style="font-size: 24px;margin-bottom: 10px;">wiki | ask support to customized this report</div> -->
          <div>
            <el-button type="success"
                       @click="addgauge">{{$t('custom.dashboard.nulldatafour')}}</el-button>
          </div>
        </div>
      </div>
      <div v-else>
        <grid-layout :layout.sync="gadgets"
                     :col-num="12"
                     :row-height="10"
                     :is-draggable="dashbordDefaultSetting.allowDragging"
                     :is-resizable="dashbordDefaultSetting.allowResizing"
                     :vertical-compact="true"
                     :use-css-transforms="true">
          <grid-item v-for="(item,index) in gadgets"
                     :x="item.x"
                     :y="item.y"
                     :w="item.w"
                     :h="item.h"
                     :i="item.i"
                     :key="item.i"
                     @container-resized="containerResizedEvent"
                     @resized="resizedEvent"
                     @mouseenter.native="mouseEnterModule(index)"
                     @mouseleave.native="mouseLeaveModule(index)">
            <div v-if="editMode"
                 class="flex flex-col items-center"
                 style="width:20px;position:absolute;top:4px;right:-22px;z-index:2020;background:#ffffff;">
              &nbsp;
              <i @mouseenter="moveComponent(true)"
                 @mouseleave="moveComponent(false)"
                 :title="$t('custom.move')"
                 class="el-icon-rank"
                 style="cursor:pointer;"></i>&nbsp;
              <i v-if="$hasPermission('sys:tenant:model:allowtomanagesystemmodel')"
                 @click="editComponent(item.i)"
                 :title="$t('custom.edit')"
                 class="el-icon-s-operation"
                 style="cursor:pointer;"></i>&nbsp;
              <i @click="closeComponent(item.i)"
                 :title="$t('custom.remove')"
                 class="el-icon-close"
                 style="cursor:pointer;"></i>&nbsp;
            </div>
            <component :editMode='editMode'
                       :gadgetInfo='item'
                       @dragChanged='gadgetDragChanged'
                       ref="gadgets"
                       @removed='gadgetRemoved'
                       :id='item.i'
                       :pageId='pageId'
                       :is="item.com"></component>
          </grid-item>
        </grid-layout>
      </div>
      <el-dialog :title="$t('custom.dashboard.layoutSelectionTitle')"
                 :visible.sync="dialog"
                 width="50%">
        <el-container>
          <el-tabs tab-position="left"
                   style="width: 100%;height:50vh;overflow-y: auto;">
            <el-tab-pane :label="$t('custom.dashboard.layoutStandard')">
              <el-row>
                <el-col :span="6"
                        class="layout-item"
                        v-for="layoutItem in layoutItems"
                        :key="layoutItem.key">
                  <el-card :body-style="{ padding: '10px'}">
                    <img :src="layoutItem.imageUrl"
                         class="image"
                         style="width: 100%;">
                    <div class="bottom clearfix">
                      <span class="layoutTitle">{{layoutItem.title}}</span>
                      <el-button class="button"
                                 size="small"
                                 :label="layoutItem.label"
                                 @click="addWidget(layoutItem.key)"
                                 type="primary">{{$t('add')}}</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane :label="$t('custom.dashboard.layoutCustomized')">
              <el-row>
                <el-col :span="6"
                        class="layout-item"
                        v-for="layoutItem in customizedLayoutItems"
                        :key="layoutItem.key">
                  <el-card :body-style="{ padding: '10px'}">
                    <img :src="layoutItem.imageUrl"
                         class="image"
                         style="width: 100%;">
                    <div class="bottom clearfix">
                      <span class="layoutTitle">
                        {{layoutItem.title}}</span>
                      <el-button class="button"
                                 size="small"
                                 :label="layoutItem.label"
                                 @click="addWidget(layoutItem.key)"
                                 type="primary">{{$t('add')}}</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-container>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialog = false"
                     type="danger"
                     size="small">{{ $t('custom.dashboard.close') }}</el-button>
        </span>
      </el-dialog>
    </div>
    <homePageConnectTip :seeDialog="this.$store.state.user.integrationEventType" />
  </div>

  <div class="absolute inset-0 flex flex-col"
       v-loading="authLoading"
       v-else>
    <ZContainer>
      <ZEmpty description="No Permission" />
    </ZContainer>
  </div>

</template>

<script>
import Vue from 'vue'
import VueGridLayout from 'vue-grid-layout'
import homePageConnectTip from '@/components/homePageConnectTip/homePageConnectTip.vue'
import pvtable from '@/components/gadget/pvtable/pvtable-gadget.vue'
import grid from '@/components/gadget/grid/grid-gadget.vue'
import gridgadget from '@/components/gadget/grid-gadget/grid-gadget.vue'
import checklistgadget from '@/components/gadget/check-list/checklist-gadget.vue'
import hierarchygridgadget from '@/components/gadget/hierarchy-grid/hierarchygrid-gadget.vue'
import crudformgadget from '@/components/gadget/crud-form/crudform-gadget.vue'
import chartgadget from '@/components/gadget/chart-line/line-gadget.vue'
import barchartgadget from '@/components/gadget/chart-bar/bar-gadget.vue'
import bar3dchartgadget from '@/components/gadget/bar3d-gadget/bar3d-gadget.vue'
import charthourglassgadget from '@/components/gadget/chart-funnel/funnel-gadget.vue'
import piechartgadget from '@/components/gadget/chart-pie/pie-gadget.vue'
import listmenu from '@/components/gadget/list-menu/list-menu-gadget.vue'
import dateRangeSlicer from '@/components/gadget/dateRange-slicer/daterange-gadget.vue'
import dateSlicer from '@/components/gadget/date-slicer/date-slicer-gadget.vue'
import runReport from '@/components/gadget/runreport-action/runreport-gadget.vue'
import kpigadget from '@/components/gadget/kpi/kpi-gadget.vue'
import circulargauge from '@/components/gadget/circular-gauge/circular-gadget.vue'
import cardicon from '@/components/gadget/card-icon/card-icon-gadget.vue'
import cardlinegadget from '@/components/gadget/card-line/card-line-gadget.vue'
import autorefreshgadget from '@/components/gadget/auto-refresh/auto-refresh-gadget.vue'
import dropdownlistgadget from '@/components/gadget/dropdown-list-slicer/dropdown-list-gadget.vue'
import cascadergadget from '@/components/gadget/cascader-slicer/cascader-gadget.vue'
import treegridgadget from '@/components/gadget/tree-grid-gadget/tree-grid-gadget.vue'
import menulistgadget from '@/components/gadget/customized/menuList/menuList-gadget.vue'
import linkbuttongadget from '@/components/gadget/link-button/link-button-gadget.vue'
import checkboxgadget from '@/components/gadget/checkbox-slicer/checkbox-gadget.vue'
import multiselectgadget from '@/components/gadget/multi-select-slicer/multi-select-gadget'
import cardnumbergadget from '@/components/gadget/card-number/card-number-gadget.vue'
import litikugadget from '@/components/gadget/litiku/litikugadget.vue'
import scattergadget from '@/components/gadget/scatter/scatter-gadget.vue'
import processgaugegadget from '@/components/gadget/gauge-stage/gauge-stage-gadget.vue'
import htmleditorgadget from '@/components/gadget/html-editor/html-editor-gadget.vue'
// import treemapgadget from '@/components/gadget/tree-map/tree-map-gadget.vue'
import drilldowntreemapgadget from '@/components/gadget/drilldown-treemap/drilldown-treemap-gadget.vue'
import placeholdergadget from '@/components/gadget/place-holder/place-holder-gadget.vue'
// import processgaugegadget from '@/components/gadget/process-gauge/process-gauge-gadget.vue'
import cardlablegadget from '@/components/gadget/card-lable/card-lable-gadget.vue'
import kanbangadget from '@/components/gadget/kanban/kanban-gadget'
import pageheadergadget from '@/components/gadget/page-header/page-header-gadget.vue'
import scorecardgadget from '@/components/gadget/score-card-gadget/score-card-gadget.vue'
import { getUUID } from '@/utils'
// Customized
import bottriggerreportgadget from '@/components/gadget/customized/bot-trigger/bot-trigger-gadget.vue'
import bottriggerpvtablegadget from '@/components/gadget/customized/bot-trigger/bot-trigger-pvtble-gadget.vue'
import bottriggeruserreportgadget from '@/components/gadget/customized/bot-trigger-user/bot-trigger-user-gadget.vue'
import crudgadget from '@/components/gadget/crud-gadget/crud-gadget.vue'
import stepgadget from '@/components/gadget/step-line/step-line-gadget.vue'
import newstepgadget from '@/components/gadget/new-step-line/new-step-line-gadget.vue'
import homepagegadget from '@/components/gadget/home-page/home-page-gadget.vue'
import customizedmultiselectgadget from '@/components/gadget/customized/multi-select-slicer/multi-select-gadget'
import customizeduserdropdownlistgadget from '@/components/gadget/customized/user-dropdown-list-slicer/user-dropdown-list-gadget.vue'
import customizedusermultipledropdownlistgadget from '@/components/gadget/customized/user-multiple-dropdown-list-slicer/user-multiple-dropdown-list-gadget.vue'
import deptdefaultslicergadget from '@/components/gadget/customized/dept-default-slicer/dept-default-slicer-gadget.vue'
import nextticketviewgadget from '@/components/gadget/next-ticket-view/next-ticket-view-gadget'
import appstabsgadget from '@/components/gadget/apps-tabs/apps-tabs-gadget.vue'
import customizedbotdetailinfogadget from '@/components/gadget/customized/bot-detail-info/bot-detail-info-gadget.vue'
import customizedbotdesigngadget from '@/components/gadget/customized/bot-design/index.vue'
import customizedbotdetailrunhistorygadget from '@/components/gadget/customized/bot-detail-run-history/bot-detail-run-history-gadget.vue'
import usertimezoneinfocardgadget from '@/components/gadget/customized/user-timezone-info-card/user-timezone-info-card-gadget.vue'
import attendancegadget from '@/components/gadget/customized/attendance-gadget/attendance-gadget.vue'
import recordgadget from '@/components/gadget/customized/record-gadget/record-gadget.vue'
import usergadget from '@/components/gadget/customized/user-gadget/user-gadget.vue'
import botsgadget from '@/components/gadget/customized/bots-gadget/bots-gadget.vue'
import workschedulegadget from '@/components/gadget/customized/workschedule-gadget/workschedule-gadget.vue'
import enterinputgadget from '@/components/gadget/enter-input-slicer/enter-input-gadget.vue'
import crudformplusgadget from '@/components/gadget/crud-form-plus/crudform-plus-gadget.vue'
import heatmap from '@/components/gadget/chart-heatmap/heatmap-gadget'
import sunburst from '@/components/gadget/chart-sunburst/sunburst-gadget'

import ZContainer from '@/components/storybook/z-container'
import ZEmpty from '@/components/storybook/z-empty'
export default {
  components: {
    ZContainer,
    ZEmpty,
    homePageConnectTip,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    grid,
    gridgadget,
    checklistgadget,
    hierarchygridgadget,
    crudformgadget,
    pvtable,
    chartgadget,
    barchartgadget,
    bar3dchartgadget,
    piechartgadget,
    listmenu,
    dateRangeSlicer,
    runReport,
    kpigadget,
    circulargauge,
    cardicon,
    cardlinegadget,
    dateSlicer,
    autorefreshgadget,
    dropdownlistgadget,
    cascadergadget,
    treegridgadget,
    menulistgadget,
    linkbuttongadget,
    checkboxgadget,
    multiselectgadget,
    cardnumbergadget,
    litikugadget,
    // gaugestagegadget,
    htmleditorgadget,
    // treemapgadget,
    scattergadget,
    drilldowntreemapgadget,
    placeholdergadget,
    processgaugegadget,
    cardlablegadget,
    kanbangadget,
    pageheadergadget,
    // pageheadergadgetnexticket,
    // Customized
    bottriggerreportgadget,
    bottriggerpvtablegadget,
    bottriggeruserreportgadget,
    crudgadget,
    stepgadget,
    newstepgadget,
    homepagegadget,
    customizedmultiselectgadget,
    customizeduserdropdownlistgadget,
    customizedusermultipledropdownlistgadget,
    deptdefaultslicergadget,
    nextticketviewgadget,
    appstabsgadget,
    customizedbotdetailinfogadget,
    customizedbotdesigngadget,
    customizedbotdetailrunhistorygadget,
    charthourglassgadget,
    scorecardgadget,
    usertimezoneinfocardgadget,
    attendancegadget,
    recordgadget,
    usergadget,
    botsgadget,
    workschedulegadget,
    enterinputgadget,
    crudformplusgadget,
    heatmap,
    sunburst
  },
  provide () {
    return {
      gadgetMessageBus: this.gadgetMessageBus,
      getSlicer: () => this.slicer,
      getFilters: () => this.filters,
      gadgetInfos: () => this.gadgetInfos,
      getSlicerComponents: () => this.slicerComponents
    }
  },
  computed: {
    slicerComponents () {
      return []
    }
  },
  data () {
    return {
      pageId: this.$getQuery('pageid'),
      gadgetMessageBus: new Vue(),
      slicer: {},
      filters: [],
      gadgetInfos: [],
      showCloseIcon: true,
      contenttemplateVue: '',
      editMode: false,
      editText: 'Edit',
      dashbordDefaultSetting: {
        allowResizing: false,
        allowDragging: false,
        responsive: true
      },
      gadgets: [],
      dialog: false,
      selectedgadget: '',
      loading: false,
      layoutItems: [
        // {
        //   key: 'grid',
        //   title: this.$t('custom.dashboard.layoutItem.gridTitle'),
        //   label: this.$t('custom.dashboard.layoutItem.gridLabel'),
        //   imageUrl: 'https://oss.mspbots.ai/app/dashboard/20200708170303.png'
        // },
        {
          key: 'charthourglassgadget',
          title: this.$t('custom.dashboard.layoutItem.charthourglassgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.hourglassgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/grid.png'
        },
        {
          key: 'gridgadget',
          title: this.$t('custom.dashboard.layoutItem.gridgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.gridgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/grid.png'
        },
        {
          key: 'checklistgadget',
          title: this.$t('custom.dashboard.layoutItem.checklistgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.checklistgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/checklist.png'
        },
        {
          key: 'hierarchygridgadget',
          title: this.$t('custom.dashboard.layoutItem.hierarchygridgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.hierarchygridgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/hierarchy_grid.png'
        },
        {
          key: 'crudformgadget',
          title: this.$t('custom.dashboard.layoutItem.crudformgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.crudformgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/crud_form.png'
        },
        {
          key: 'pvtable',
          title: this.$t('custom.dashboard.layoutItem.pvtablegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.pvtableLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/20200708170310.png'
        },
        {
          key: 'chartgadget',
          title: this.$t('custom.dashboard.layoutItem.chartgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.chartgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/line_chart.png'
        },
        {
          key: 'barchartgadget',
          title: this.$t('custom.dashboard.layoutItem.barchartgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.barchartgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/bar_chart.png'
        },
        {
          key: 'bar3dchartgadget',
          title: this.$t('custom.dashboard.layoutItem.bar3dchartgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.bar3dchartgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/transparent_bar_3d.png'
        },
        {
          key: 'piechartgadget',
          title: this.$t('custom.dashboard.layoutItem.piechartgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.piechartgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/pie_chart.png'
        },
        {
          key: 'heatmapgadget',
          title: this.$t('custom.dashboard.layoutItem.heatmapgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.heatmapgadgetTitle'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/heatmap.png'
        },
        // {
        //   key: 'listmenu',
        //   title: this.$t('custom.dashboard.layoutItem.listmenuTitle'),
        //   label: this.$t('custom.dashboard.layoutItem.listmenuLabel'),
        //   imageUrl: 'https://oss.mspbots.ai/app/dashboard/20200708170247.png'
        // },
        {
          key: 'dateRangeSlicer',
          title: this.$t('custom.dashboard.layoutItem.dateRangeSlicerTitle'),
          label: this.$t('custom.dashboard.layoutItem.daterangeSlicerLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/daterange.png'
        },
        {
          key: 'runReport',
          title: this.$t('custom.dashboard.layoutItem.runReportTitle'),
          label: this.$t('custom.dashboard.layoutItem.runreportLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/button.png'
        },
        {
          key: 'kpigadget',
          title: this.$t('custom.dashboard.layoutItem.kpigadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.kpiLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/20200713111020.png'
        },
        {
          key: 'circulargauge',
          title: this.$t('custom.dashboard.layoutItem.circulargaugeTitle'),
          label: this.$t('custom.dashboard.layoutItem.circularguagegadgetLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/20200713110301.png'
        },
        {
          key: 'cardicon',
          title: this.$t('custom.dashboard.layoutItem.cardiconTitle'),
          label: this.$t('custom.dashboard.layoutItem.cardicongadgetLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/icon-card.png'
        },
        {
          key: 'cardlinegadget',
          title: this.$t('custom.dashboard.layoutItem.cardlinegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.cardlinegadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/cardline.png'
        },
        {
          key: 'dateSlicer',
          title: this.$t('custom.dashboard.layoutItem.dateSlicerTitle'),
          label: this.$t('custom.dashboard.layoutItem.dateslicergadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/monthdatepicker.png'
        },
        {
          key: 'autorefreshgadget',
          title: this.$t('custom.dashboard.layoutItem.autorefreshgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.autorefreshgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/auto-refresh.png'
        },
        {
          key: 'dropdownlistgadget',
          title: this.$t('custom.dashboard.layoutItem.dropdownlistgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.dropdownlistgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/dropdown-list.png'
        },
        {
          key: 'cascadergadget',
          title: this.$t('custom.dashboard.layoutItem.cascadergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.cascadergadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/dropdown-list.png'
        },
        {
          key: 'treegridgadget',
          title: this.$t('custom.dashboard.layoutItem.treegridgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.treegridgadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/tree_grid.png'
        },
        {
          key: 'menulistgadget',
          title: this.$t('custom.dashboard.layoutItem.menulistgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.menulistgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/auto-refresh.png'
        },
        {
          key: 'linkbuttongadget',
          title: this.$t('custom.dashboard.layoutItem.linkbuttongadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.linkbuttongadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/link-button.png'
        },
        {
          key: 'checkboxgadget',
          title: this.$t('custom.dashboard.layoutItem.checkboxgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.checkboxgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/checkbox.png'
        },
        {
          key: 'multiselectgadget',
          title: this.$t('custom.dashboard.layoutItem.multiselectgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.multiselectgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/multiSelect-dropd.png'
        },
        {
          key: 'cardnumbergadget',
          title: this.$t('custom.dashboard.layoutItem.cardnumbergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.cardnumbergadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/card_number.png'
        },
        {
          key: 'litikugadget',
          title: this.$t('custom.dashboard.layoutItem.litikugadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.litikugadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/litikugadget.png'
        },
        {
          key: 'scattergadget',
          title: this.$t('custom.dashboard.layoutItem.scattergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.scattergadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/bubbles_chart.png'
        },
        // {
        //   key: 'gaugestagegadget',
        //   title: this.$t('custom.dashboard.layoutItem.gaugestagegadgetTitle'),
        //   label: this.$t('custom.dashboard.layoutItem.gaugestagegadgetLable'),
        //   imageUrl: 'https://oss.mspbots.ai/app/dashboard/card-number.png'
        // },
        {
          key: 'htmleditorgadget',
          title: this.$t('custom.dashboard.layoutItem.htmleditorgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.htmleditorgadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/html.png'
        },
        // {
        //   key: 'treemapgadget',
        //   title: this.$t('custom.dashboard.layoutItem.treemapgadgetTitle'),
        //   label: this.$t('custom.dashboard.layoutItem.treemapgadgetLable'),
        //   imageUrl: 'https://oss.mspbots.ai/app/mspbots_theme_icon/tree_map.png'
        // },
        {
          key: 'drilldowntreemapgadget',
          title: this.$t('custom.dashboard.layoutItem.drilldowntreemapgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.drilldowntreemapgadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/tree_map.png'
        },
        {
          key: 'processgaugegadget',
          title: this.$t('custom.dashboard.layoutItem.processgaugegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.processgaugegadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/process_gauge.png'
        },
        {
          key: 'placeholdergadget',
          title: this.$t('custom.dashboard.layoutItem.placeholdergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.placeholdergadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'cardlablegadget',
          title: this.$t('custom.dashboard.layoutItem.cardlablegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.cardlablegadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'kanbangadget',
          title: this.$t('custom.dashboard.layoutItem.kanbangadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.kanbangadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'pageheadergadget',
          title: this.$t('custom.dashboard.layoutItem.pageheadergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.pageheadergadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'pageheadergadgetnexticket',
          title: this.$t('custom.dashboard.layoutItem.pageheadergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.pageheadergadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'scorecardgadget',
          title: this.$t('custom.dashboard.layoutItem.scorecardgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.scorecardgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'enterinputgadget',
          title: this.$t('custom.dashboard.layoutItem.enterinputgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.enterinputgadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/slicer_input.png'
        },
        {
          key: 'sunburstgadget',
          title: this.$t('custom.dashboard.layoutItem.sunburstgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.sunburstgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/sunburst.png'
        },
      ],
      customizedLayoutItems: [
        {
          key: 'bottriggerreportgadget',
          title: this.$t('custom.dashboard.layoutItem.bottriggerreportgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.bottriggerreportgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/bot-trigger-report.png'
        },
        {
          key: 'usertimezoneinfocardgadget',
          title: this.$t('custom.dashboard.layoutItem.usertimezoneinfocardgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.usertimezoneinfocardgadgetLable'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/timezone.png'
        },
        {
          key: 'bottriggerpvtablegadget',
          title: this.$t('custom.dashboard.layoutItem.bottriggerpvtablegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.bottriggerpvtablegadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/bot-trigger-report.png'
        },
        {
          key: 'crudgadget',
          title: this.$t('custom.dashboard.layoutItem.crudgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.crudgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/bot-trigger-report.png'
        },
        // {
        //   key: 'bottriggeruserreportgadget',
        //   title: this.$t('custom.dashboard.layoutItem.bottriggerreportgadgetTitle'),
        //   label: this.$t('custom.dashboard.layoutItem.bottriggerreportgadgetLable'),
        //   imageUrl: 'https://oss.mspbots.ai/app/dashboard/bot-trigger-report.png'
        // },
        {
          key: 'stepgadget',
          title: this.$t('custom.dashboard.layoutItem.stepgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.getstartprogressLable'),
          imageUrl: this.$ossLink + '/app/dashboard/getstartedprogress.png'
        },
        {
          key: 'newstepgadget',
          title: this.$t('custom.dashboard.layoutItem.newstepgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.newgetstartprogressLable'),
          imageUrl: this.$ossLink + '/app/dashboard/getstartedprogress.png'
        },
        {
          key: 'homepagegadget',
          title: this.$t('custom.dashboard.layoutItem.pagehomegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.pagehomegadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'customizedmultiselectgadget',
          title: this.$t('custom.dashboard.layoutItem.customizedmultiselectgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.customizedmultiselectgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/customized-multiSelect-dropdown.png'
        },
        {
          key: 'customizeduserdropdownlistgadget',
          title: this.$t('custom.dashboard.layoutItem.customizeduserdropdownlistgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.customizeduserdropdownlistgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/dropdown-list.png'
        },
        {
          key: 'customizedusermultipledropdownlistgadget',
          title: this.$t('custom.dashboard.layoutItem.customizedusermultipledropdownlistgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.customizedusermultipledropdownlistgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/dropdown-list.png'
        },
        {
          key: 'deptdefaultslicergadget',
          title: this.$t('custom.dashboard.layoutItem.deptdefaultslicergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.deptdefaultslicergadgetLabel'),
          imageUrl: this.$ossLink + '/app/dashboard/auto-refresh.png'
        },
        {
          key: 'nextticketviewgadget',
          title: this.$t('custom.dashboard.layoutItem.nextticketviewgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.nextticketviewgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'appstabsgadget',
          title: this.$t('custom.dashboard.layoutItem.appstabsgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.tabsgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'customizedbotdetailinfogadget',
          title: this.$t('custom.dashboard.layoutItem.customizedbotdetailinfogadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.customizedbotdetailinfogadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'customizedbotdesigngadget',
          title: this.$t('custom.dashboard.layoutItem.customizedbotdesignTitle'),
          label: this.$t('custom.dashboard.layoutItem.customizedbotdesigngadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'customizedbotdetailrunhistorygadget',
          title: this.$t('custom.dashboard.layoutItem.customizedbotdetailrunhistorygadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.customizedbotdetailrunhistorygadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'attendancegadget',
          title: this.$t('custom.dashboard.layoutItem.attendancegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.attendancegadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'recordgadget',
          title: this.$t('custom.dashboard.layoutItem.recordgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.recordgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'usergadget',
          title: this.$t('custom.dashboard.layoutItem.usergadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.usergadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'botsgadget',
          title: this.$t('custom.dashboard.layoutItem.botsgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.botsgadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'workschedulegadget',
          title: this.$t('custom.dashboard.layoutItem.workschedulegadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.workschedulegadgetLable'),
          imageUrl: this.$ossLink + '/app/dashboard/place-holder.png'
        },
        {
          key: 'crudformplusgadget',
          title: this.$t('custom.dashboard.layoutItem.crudformplusgadgetTitle'),
          label: this.$t('custom.dashboard.layoutItem.crudformplusgadgetLabel'),
          imageUrl: this.$ossLink + '/app/mspbots_theme_icon/crud_form.png'
        }
      ],
      showMsg: false,
      dashboardId: null,

      permission: false,
      authLoading: false
    }
  },
  async created () {
    try {
      this.authLoading = true
      await this.getDashboardAuth()
      this.getQureAll()
      this.getDashboardLayout()
      this.gadgetMessageBus.$on(this.pageId + 'botDetailReload', (e) => {
        this.pageReload(e)
      })
      if (window.location.href === 'https://portal.mspbots.ai/home') {
        window.location.href = 'https://portal.mspbots.ai/portal'
      }
      if (window.location.href === 'https://portalint.mspbots.ai/home') {
        window.location.href = 'https://portalint.mspbots.ai/portal'
      }
    } catch (error) {

    } finally {
      this.authLoading = false
    }
    this.loginGoTo()
  },
  beforeDestroy () {
    this.gadgetMessageBus.$off()
    if (this.$store.state.bot.defaultTab) this.$store.commit('DEFAULTTAB', false)
  },
  methods: {
    loginGoTo () {
      let roleIdList = this.$store.state.user.roleList
      let findIndex1 = roleIdList.findIndex(e => e.id === '1524636890430033921')
      let findIndex = roleIdList.findIndex(e => e.id === '1266700345287905282')
      if (roleIdList.length === 2 && findIndex > -1 && findIndex1 > -1) {
        this.$router.replace({ name: 'desktop' })
      }
      if (roleIdList.length === 2 && roleIdList.findIndex(e => e.id === '1747869421395746817') > -1 && roleIdList.findIndex(e => e.id === '1747869610118455297') > -1) {
        this.$router.replace({ name: 'desktop' })
      }
      if (roleIdList.length === 1 && roleIdList.findIndex(e => e.id === '1747869421395746817') > -1 ){
        this.$router.replace({ name: 'desktop' })
      }
      if (roleIdList.length === 1 && roleIdList.findIndex(e => e.id === '1747869610118455297') > -1 ){
        this.$router.replace({ name: 'desktop' })
      }
    },
    async getDashboardAuth () {
      const { getAssert } = this.$interface.system
      const { botId } = this.$route.query
      const params = {
        sourceId: botId,
        sourceType: 4
      }
      const { data: response } = await getAssert(params)
      if (response.code === 403) {
        // eslint-disable-next-line no-throw-literal
        throw 'no permission'
      }
      this.permission = true
    },
    pageReload (e) {
      this.$router.replace({
        query: e.query
      })
      this.$nextTick(() => {
        this.getQureAll()
        this.getDashboardLayout()
      })
    },
    addgauge () {
      this.editMode = true
      this.dashbordDefaultSetting.allowResizing = true
      this.editText = 'Save'
      this.selectedgadgetPop()
    },
    getDashboardLayout () {
      var _self = this
      this.loading = true
      this.gadgetInfos = []
      const params = {
        businessId: this.pageId
      }
      this.$interface.reports.getDashboardLayout(params)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            this.dashboardId = res.data.id
            this.gadgets = ((res.data.contentNew && res.data.contentNew.length) > 0 ? res.data.contentNew : JSON.parse(res.data.content)) || []
            this._.forEach(this.gadgets, function (value, key) {
              _self.gadgetInfos.push(
                {
                  id: value.i,
                  gadgetStatus: 'init',
                  gadgetType: ''
                }
              )
            })
            this.$store.commit('SET_GADGET_LAYOUT', this.gadgets)
          }
        })
    },
    gadgetDragChanged (e) {
      this.dashbordDefaultSetting.allowDragging = e.state
    },
    gadgetRemoved (e) {
      var index = this.getGadgetIndex(e.id)
      this.gadgets.splice(index, 1)
      this.onSave()
    },
    getGadgetIndex (id) {
      for (var i = 0; i < this.gadgets.length; i++) {
        if (this.gadgets[i].i === id) {
          return i
        }
      }
    },
    onSave () {
      let dashboardlayout = JSON.stringify(this.gadgets)
      if (dashboardlayout) {
        const params = {
          tenantCode: this.$store.state.user.tenantCode,
          type: 1,
          businessId: this.pageId,
          content: dashboardlayout,
          contentNew: this.gadgets,
          id: this.dashboardId
        }
        this.$interface.reports.saveDashboardLayout(params).then(({ data: res }) => {
          this.gadgetMessageBus.$emit(this.pageId + 'closeLoading')
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            return this.$message.success(this.$t('custom.dashboard.layoutSavedMessage') + res.msg)
          }
        })
      }
    },
    showDesign () {
      this.showMsg = !this.showMsg
    },
    closeDesign () {
      this.showMsg = false
      this.editMode = false
    },
    toggleClick () {
      this.editMode = !this.editMode
      if (this.editMode) {
        this.dashbordDefaultSetting.allowResizing = true
        this.editText = 'Save'
      } else {
        this.onSave()
        this.dashbordDefaultSetting.allowResizing = false
        this.editText = 'Edit'
      }
    },
    selectedgadgetPop () {
      this.dialog = true
    },
    addWidget (key) {
      this.dialog = false
      var item = { 'x': 0, 'y': 0, 'w': 5, 'h': 5, 'i': getUUID(), com: key }
      this.gadgets.push(item)
    },
    resizedEvent: function (i, newH, newW, newHPx, newWPx) {
      var index = this.getGadgetIndex(i)
      this.gadgets[index].h = newH
      this.gadgets[index].w = newW

      this.$refs.gadgets[index].resized(i, newH, newW, newHPx, newWPx)
    },
    containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
      var index = this.getGadgetIndex(i)
      this.gadgets[index].h = newH
      this.gadgets[index].w = newW

      this.$refs.gadgets[index].containerResizedEvent(i, newH, newW, newHPx, newWPx)
    },
    mouseEnterModule (index) {
      if (this.editMode) {
        this.$set(this.gadgets[index], 'showSetting', 'show')
      }
    },
    mouseLeaveModule (index) {
      if (this.editMode) {
        this.$delete(this.gadgets[index], 'showSetting')
      }
    },
    moveComponent (status) {
      if (this.editMode) {
        this.gadgetDragChanged({ state: status })
      }
    },
    editComponent (componentId) {
      try {
        let index = this.getGadgetIndex(componentId)
        let refsList = this.$refs.gadgets || []
        for (let i = 0; i < refsList.length; i++) {
          const elementId = refsList[i].id
          if (elementId === componentId && index > -1) {
            this.$refs.gadgets[i].showQueryModel()
          }
        }
      } catch (error) { }
    },
    closeComponent (componentId) {
      this.gadgetRemoved({ id: componentId })
    },
    getQureAll () {
      try {
        let qureObj = {}
        let hasQure = decodeURIComponent(window.location.search).split('?').length > 1
        hasQure && decodeURIComponent(window.location.search).split('?')[1].split('&').map(e => { qureObj[e.split('=')[0]] = e.split('=')[1] })
        this.slicer = Object.assign(qureObj, this.slicer)
      } catch (error) { }
    }
  }
}
</script>
<style  >
.layoutTitle {
  font-size: 12px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layoutTitle:hover {
  overflow: visible;
}
.vue-grid-item.vue-grid-placeholder {
  background: #f2f8ff;
  border: 1px solid #38f;
  opacity: 1;
}

.layoutJSON {
  background: #ddd;
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
}

.eventsJSON {
  background: #ddd;
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
  height: 100px;
  overflow-y: scroll;
}

.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}

.vue-resizable-handle {
  z-index: 5000;
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  background: url("");
  background-position: bottom right;
  padding: 0 3px 3px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: se-resize;
}

.editmode:not(.vue-grid-placeholder) {
  border: 1px solid #38f;
  opacity: 0.5;
}

.vue-grid-item.resizing {
  opacity: 0.9;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

.layout-item {
  text-align: center;
  margin-bottom: 15px;
  padding: 0 5px;
}

.layout-item .bottom {
  position: relative;
  margin-top: 15px;
}

.layout-item .bottom span {
  display: block;
  float: left;
  width: 50%;
  margin-top: 12px;
  text-align: left;
}

.layout-item .bottom button {
  padding-top: 0;
}

.top-toolbar {
  position: relative;
  margin-top: -15px;
  height: 35px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background-color: #fff;
  margin-left: -15px;
  padding-top: 10px;
  width: calc(100% + 30px);
}
.btnBox {
  height: 16px;
  padding: 0px 10px;
  background: #c4ebf3;
  position: absolute;
  top: -15px;
  right: 24px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.top-toolbar .top-toolbar-title {
  padding-left: 25px;
}
.showBtn {
  font-size: 18px;
  color: #00c4ed;
}

.closeBtn {
  font-size: 18px;
  position: absolute;
  top: 8px;
  right: 11px;
}
/* .vue-grid-layout-dashboard .vue-grid-layout{
    height: auto !important;
  }
  .vue-grid-layout-dashboard .vue-grid-item{
    height: auto !important;
  } */
</style>
